<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true">
				<el-form-item>
					<el-date-picker v-model="date" type="date" placeholder="选择日期">
					</el-date-picker>
					<el-time-picker is-range v-model="time" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
					</el-time-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleSearch">查询</el-button>
					<el-button type="danger" @click="$router.go(-1)">返回</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		<div>
			<commit-chart :data='lineFormatData' :options='lineOptions'></commit-chart>
		</div>
	</section>
</template>
<script>
import moment from 'moment'
import CommitChart from 'src/components/chart/Line'
import { breathService } from 'src/api'

export default {
	name: 'home',
	data() {
		return {
			deviceId: this.$route.params.deviceId,
			// date: moment('2018-05-08 00:00:00'), // 整点
			// time: [moment('2018-05-08 11:32:00'), moment('2018-05-08 11:32:05')], //整小时
			date: moment().hours(0).minutes(0).seconds(0), // 整点
			time: [moment().subtract(1, 'minutes'), moment()], //过去5秒的数据

			lineData: [],
			lineStyle: {
				label: '呼吸曲线',
				// backgroundColor: 'rgba(0, 0, 0, 0)',
				backgroundColor: '#f87979',
				borderColor: '#f87979',
				fill: false,
				pointRadius: 0,
			},
			lineOptions: {
				responsive: true,
				maintainAspectRatio: false,
				title: {
					display: true,
					text: '呼吸监控'
				},
				// tooltips: {
				// 	mode: 'index',
				// 	intersect: false,
				// },
				hover: {
					mode: 'nearest',
					intersect: true
				},
				scales: {
					xAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: '时间'
						}
					}],
					yAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: '音量'
						},
						// gridLines: {
						// 	drawBorder: false,
						// 	color: ['pink', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']
						// }
					}]
				}
			}
		}
	},
	components: {
		CommitChart
	},
	computed: {
		lineFormatData() {
			let labels = this.lineData.map(({ name }) => name);
			let data = this.lineData.map(({ value }) => value);

			return {
				labels,
				datasets: [Object.assign(this.lineStyle, { data })]
			}
		},
		dateTime() {
			let date = this.date.valueOf();
			let [start, end] = this.time;
			start = moment(start);
			end = moment(end);

			// 开始时间段
			let sHours = start.get('hour'),
				sMinutes = start.minutes(),
				sSeconds = start.seconds();

			// 结束时间段
			let eHours = end.hours(),
				eMinutes = end.minutes(),
				eSeconds = end.seconds();

			return [
				moment(date).hours(sHours).minutes(sMinutes).seconds(sSeconds).valueOf(),
				moment(date).hours(eHours).minutes(eMinutes).seconds(eSeconds).valueOf(),
			]

			// console.log('this.dateTime', result);
		}
	},
	methods: {
		getBreathLogs(startTime, endTime, deviceId) {
			breathService.getBreathLogs(startTime, endTime, deviceId)
				.then(res => {
					this.lineData = res;
				})
		},
		handleSearch() {
			this.getBreathLogs(...this.dateTime, this.deviceId);
		}
	},
	mounted() {
		this.getBreathLogs(...this.dateTime, this.deviceId);
	}

}

</script>
